body { background: #f5f6fa; }
.article-container { max-width: 800px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 32px 36px 40px 36px; }
#articleList { margin-bottom: 30px; }
.article-card { background: #f8f9fa; border-radius: 8px; padding: 18px 22px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: box-shadow 0.2s; }
.article-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
#publishForm { background: #f8f9fa; border-radius: 8px; padding: 18px 22px; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
#publishForm input, #publishForm textarea { width: 100%; margin: 8px 0; padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
#publishBtn, #cancelPublishBtn, #commentBtn { margin-right: 10px; background: #4f8cff; color: #fff; border: none; border-radius: 6px; padding: 8px 22px; font-size: 1em; cursor: pointer; transition: background 0.2s; }
#publishBtn:hover, #cancelPublishBtn:hover, #commentBtn:hover { background: #357ae8; }
.modal { display: block; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.2); }
.modal-content { background: #fff; margin: 60px auto; padding: 30px; border-radius: 10px; width: 90%; max-width: 600px; position: relative; }
.close { position: absolute; right: 18px; top: 10px; font-size: 28px; color: #888; cursor: pointer; }
#commentList { margin: 16px 0; }
.comment-item { background: #f1f3f6; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
#favoriteArea { margin: 10px 0; } 